<template>
	<div class="card-wrapper">
		<div class="card-top-wrapper">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
				<el-breadcrumb-item>特殊水卡</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/applylist' }">水卡开卡记录</el-breadcrumb-item>
				<el-breadcrumb-item>水卡详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="card-user-wrapper">
			<div class="header-title">
				<el-icon class="el-icon-postcard"></el-icon>
				<span>用户信息</span>
			</div>
			<div class="base-user">
				<div class="user-columns">
					<span>姓名：{{card.full_name || '--'}}</span>
					<span>性别：{{card.sex || '未知'}}</span>
					<span>手机号码：{{card.tel || '--'}}</span>
				</div>
				<div class="user-columns">
					<span>证件号码：{{card.IDcard || '--'}}</span>
					<span>证件类型：{{card.paper_type || '--'}}</span>
					<span>园区名称：{{card.village_name || '--'}}</span>
					<span>地址：{{card.address || '--'}}{{card.address_two}}</span>
				</div>
				<div class="user-pic-group" v-if="card.audit_data.length>0">
					<p class="pic-label">证件照片：</p>
					<el-image :preview-src-list="card.audit_data" lazy class="user-pic mr-15"  :src="card.audit_data[0]" fit="cover"></el-image>
					<el-image :preview-src-list="card.audit_data" lazy class="user-pic" v-if="card.audit_data.length==2" :src="card.audit_data[1]" fit="cover"></el-image>
				</div>
			</div>
		</div>
		<div class="card-user-wrapper">
			<div class="header-title">
				<el-icon class="el-icon-bank-card"></el-icon>
				<span>水卡信息</span>
			</div>
			<div class="card-info">
         <span>水卡类型：{{card.card_class}}-{{card.card_type}}</span>
         <span>水卡卡号：{{card.card_number}}</span>
         <span>充值金额：{{card.recharge_money}}</span>
         <span>水卡押金：{{card.card_deposit}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'checkcard',
		data: function () {
			return {
			  card:{
					audit_data:[]
				},//水卡信息
			}
		},
		created: function () {
			this.applyInfo();
		},
		inject: ['reload'],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			applyInfo() {
				var apply_id = this.$route.query.id;
				this.$post({
					url: 'Partner/WaterCard/getWaterCardAudit',
					data: {
						id: apply_id
					},
					success:res=> {
						if(res.code>0){
							this.card=res.data;
						}else{
							this.$message.error(res.message);
						}
					},error:e=>{
						this.$message.error("网络错误");
					}
				})
			}
		},
		mounted() {

		},
		watch: {

		}
	}
</script>

<style scoped>
	.card-wrapper {
		/* position: absolute; */
		background: #FAFAFA;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.card-top-wrapper {
		background: #fff;
		height: 50px;
		display: flex;
		align-items: center;
		padding-left: 22px;
		position: relative;
	}

	.card-top-wrapper::after {
		border-bottom: 1px #CCCDCD solid;
		position: absolute;
		width: 98%;
		content: "";
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}

	.header-title {
		color: #2C5585;
		padding: 20px 0 10px 18px;
		position: relative;
	}

	.header-title span {
		display: inline-block;
	}

	.header-title::after {
		position: absolute;
		content: "";
		width: 95%;
		border-bottom: 1px dotted #F2F2F2;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}

	.card-user-wrapper {
		background: #fff;
		margin-top: 15px;
	}

	.base-user {
		padding: 30px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		color: #4C4C4C;
		font-size: 14px;
	}

	.user-columns {
		display: flex;
		flex-flow: column wrap;
		min-width: 400px;
		margin-bottom: 30px;
	}

	.user-columns span {
		display: inline-block;
		margin-top: 30px;
	}

	.user-columns span:first-child {
		margin-top: 0;
	}

	.user-pic-group {
		display: flex;
	}

	.user-pic {
		width: 240px;
		height: 200px;
	}

	.mr-15 {
		margin-right: 15px;
	}
	.card-info{
		display: flex;
		padding: 30px;
		color: #4C4C4C;
		font-size: 14px;
	}
	.card-info span{
		flex: 1;
		text-align: left;
	}
</style>